<template>
	<view>
		<u-sticky>
			<view class="flex p-20 bg-white">
				<view class="flex-1 ml-20" @click="showTimePicker">
					<text>开始日期</text>
					<text class="ml-10" v-if="paramCp.start_time">{{ paramCp.start_time | dateFormat }}</text>
				</view>
				<view class="flex-1" @click="showEndTimePicker">
					<text>结束日期</text>
					<text class="ml-10" v-if="paramCp.end_time">{{ paramCp.end_time | dateFormat }}</text>
				</view>
				<u-icon name="search" size="50" @click="search"></u-icon>
			</view>
			<view class="u-border-top u-border-bottom bg-white">
				<u-tabs @change="changeTab" :current="current" :list="[{ name: '已结算' }, { name: '未结算' }]" :scrollable="false" lineColor="#FF3B26" lineWidth="100rpx" lineHeight="6rpx"></u-tabs>
			</view>
		</u-sticky>
		<u-datetime-picker itemHeight="100" ref="datetimePicker" :formatter="formatter" :show.sync="startTimeShow" v-model="paramCp.start_time" mode="date" @confirm="close(1)" @cancel="close(1)"></u-datetime-picker>
		<u-datetime-picker itemHeight="100" ref="endDatetimePicker" :formatter="formatter" :show.sync="endTimeShow" v-model="paramCp.end_time" mode="date" @confirm="close(2)" @cancel="close(2)"></u-datetime-picker>

		<view class="p-20">
			<view class="flex p-20 box-shadow radius-lg text-center bg-white">
				<view class="flex-1 u-border-right flex ali-c">
					<u-icon name="bag-fill" size="50" color="#FF3B26"></u-icon>
					<text class="flex-1">订单数</text>
					<view class="flex-1">
						(
						<u-count-to class="mx-10" color="#000" fontSize="38" :startVal="0" :endVal="orderCount"></u-count-to>
						)
					</view>
				</view>
				<view class="flex ali-c flex-1 ml-20">
					<u-icon name="rmb-circle-fill" size="50" color="#FF3B26"></u-icon>
					<text class="flex-1 ml-20">已结算金额</text>
					<view class="flex-1">
						(
						<u-count-to class="mx-10" color="#000" fontSize="38" :startVal="0" :endVal="settleMoney"></u-count-to>
						)
					</view>
				</view>
			</view>
		</view>

		<view class="p-20 text-sm flex ali-c jus-b bg-white u-border-bottom" v-for="item in list">
			<view>
				<view>订单号：{{ item.order_sn }}</view>
				<view class="mt-10">下单时间：{{ item.addtime }}</view>
			</view>
			<view class="text-primary no-wrap"> 结算金额:{{ item.settle_money }} </view>
		</view>

		<view class="pt-30p" v-if="!list.length && !loading">
			<u-empty mode="list" textSize="32" iconSize="140"></u-empty>
		</view>
		<view v-if="loading" class="pt-30p">
			<u-loading-icon mode="circle" text="加载中..." vertical size="40" textSize="32"></u-loading-icon>
		</view>

		<adminBottomTab></adminBottomTab>
	</view>
</template>
<script>
import adminBottomTab from "../../components/admin-bottom-tab.vue"
import request from "../../utils/admin-request.js"
import moment from "moment"
export default {
	components: { adminBottomTab },
	data() {
		return {
			startTimeShow: false,
			endTimeShow: false,
			current: 0,
			orderCount: 0,
			settleMoney: 0,
			loading: false,
			param: {
				
			},
			paramCp:{
				start_time: "",
				end_time: "",
			},
			list:[]
		}
	},
	onLoad(options) {
		this.getList()
	},
	onReady() {
		this.$refs.datetimePicker.setFormatter(this.formatter)
		this.$refs.endDatetimePicker.setFormatter(this.formatter)
	},
	methods: {
		search(){
			this.param = JSON.parse(JSON.stringify(this.paramCp))
			this.getList()
		},
		changeTab(e) {
			this.current = e.index
			this.getList()
		},
		async getList() {
			this.loading = true
			await request({
				url: "/api/merch/settleList",
				data: {
					status: this.current + 1,
					...(this.param.start_time && this.param.end_time?{
						search_time:moment(this.param.start_time).format('yyyy-MM-DD')  + " - " + moment(this.param.end_time).format('yyyy-MM-DD'),
					}:{})
				},
			}).then((res) => {
				this.list = res.data.list
				this.orderCount = res.data.orderCount
				this.settleMoney = res.data.settleMoney
			})
			this.loading = false
		},
		close(type) {
			if (type == 1) {
				this.startTimeShow = false
			} else {
				this.endTimeShow = false
			}
		},
		showTimePicker() {
			this.startTimeShow = true
		},
		showEndTimePicker() {
			this.endTimeShow = true
		},
		formatter(type, value) {
			if (type === "year") {
				return `${value}年`
			}
			if (type === "month") {
				return `${value}月`
			}
			if (type === "day") {
				return `${value}日`
			}
			return value
		},
	},
}
</script>
